<script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useUserInfo } from '@/store/user'
import { isRunningInPWA } from './utils/utils'

const isPwa = isRunningInPWA()
useUserInfo().setIsPwa(isPwa)
console.log(isPwa, 'isPwa--------')

const appWidth = ref('')
const maxWidth = 961
const iconPosition = ref({
  right: '6px',
  width: 0,
})

// #ifdef H5
const throttle = (func: Function, wait: number) => {
  let lastTime = 0
  let timeout: any
  return function (...args: any) {
    const context = this
    const now = Date.now()
    const remaining = wait - (now - lastTime)

    if (remaining <= 0) {
      if (timeout) {
        clearTimeout(timeout)
        timeout = null
      }
      lastTime = now
      func.apply(context, args)
    } else if (!timeout) {
      timeout = setTimeout(() => {
        lastTime = Date.now()
        timeout = null
        func.apply(context, args)
      }, remaining)
    }
  }
}
// 
const handleResize = () => {
  const viewWidth = uni.getSystemInfoSync().windowWidth
  const rightWidth = 6
  const maxWidth = 961
  const thisAppWidth = viewWidth >= maxWidth ? '375px' : '100%'
  // let thisAppWidth = '100%'
  // if (viewWidth >= maxWidth) {
  //   thisAppWidth = '375px'
  // } else {
  //   thisAppWidth = '100%'
  // }
  const appEl = document.getElementById('app') as HTMLElement
  if (thisAppWidth !== appWidth.value) {
    appWidth.value = thisAppWidth
    //  CSS  #app 
    if (appEl) {
      appEl.style.setProperty('--uni-app-max-width', appWidth.value)
    }
  }
  // 
  const icon = document.querySelector('.telegram-fixed-icon') as HTMLElement
  if (!appEl || !icon) return
  // 
  const { width } = appEl.getBoundingClientRect()
  iconPosition.value.width = width

  // 
  if (viewWidth > maxWidth) {
    const viewportCenter = viewWidth / 2
    iconPosition.value.right = `${viewportCenter - width / 2 + rightWidth}px`
  } else {
    iconPosition.value.right = '6px'
  }
  if (appEl) {
    // 
    appEl.style.setProperty('--uni-app-telegram-icon-position-right', iconPosition.value.right)
  }
}
const throttledResize = throttle(handleResize, 100)

onMounted(() => {
  const observer = new MutationObserver((mutations) => {
    if (document.querySelector('.telegram-fixed-icon')) {
      handleResize()
      observer.disconnect()
    }
  })

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  })
  handleResize()
  window.addEventListener('resize', throttledResize)
})
onBeforeUnmount(() => {
  // resize
  window.removeEventListener('resize', throttledResize)
})
// #endif

onLaunch(() => {
  console.log('App Launch')
})
onShow(() => {
  console.log('App Show')
})
onHide(() => {
  console.log('App Hide')
})
</script>

<style lang="scss">
@import 'uview-plus/index.scss';

// #ifdef H5
::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

#app {
  max-width: var(--uni-app-max-width);
  margin: 0 auto;
}

::v-deep .u-navbar > .u-navbar--fixed,
.u-popup.custom-width-bottom > .u-transition:nth-of-type(2) {
  width: var(--uni-app-max-width);
  left: auto !important;
  right: auto !important;
}
.telegram-fixed-icon {
  width: 2rem;
  height: 2rem;
  position: fixed;
  bottom: 15vh;
  right: var(--uni-app-telegram-icon-position-right);
  z-index: 9999;
}
/*  */
@keyframes pageFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
// 
::v-deep .u-navbar__content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;

  .nav-back-btn {
    .back-icon {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .u-navbar__content__title {
    color: white !important;
    font-weight: bold;
  }
}
/*  */
uni-page-wrapper {
  animation: pageFadeIn 0.4s ease-in;
}
	.btn {
		width: 18%;
		display: flex;
		flex-flow: column;
		border-radius: 30px;
		text-align: center;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		box-shadow: 2px 3px 16px 0px rgba(47, 92, 188, 0.4);  /*  */
		font-weight: bold;
		font-size: 18px;
		position: fixed;
		bottom: 6vh;
		padding: 10px 20px;
		cursor: pointer;
		color: #fff;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}
// #endif
</style>